<!doctype html>
<html>
	<head>
		<!--设置页面编码为utf-8-->
		<meta charset="UTF-8">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>高大上CSS3动画效果演示</title>
		
		<link href="css/animate.css" rel="stylesheet" type="text/css" />
		<!--css样式-->
		<style type="text/css">
			*{margin:0;padding:0}
			body{background:#eee}
			.exhibition{width:880px;height:600px;margin:20px auto}
			.exhibition .box{width:218px;height:145px;margin-left:2px;margin-bottom:20px;background:#0066ff;float:left;
				cursor:pointer;color:#fff;position:relative
				}
			.exhibition .box h3{font-size:24px;text-align:center;font-weight:300;margin-top:50px;}
			.exhibition .box p{padding:10px;font-size:14px;width:218px;height:145px;position:absolute;left:0;top:0;display:none}
			.exhibition .bg_purple{background:#90f}
			.exhibition .bg_green{background:#090}
			.exhibition .bg_red{background:#c00}
			.exhibition .bg_brown{background:#880}
			.exhibition .bg_black{background:#000;opacity:0.8;filter:alpha(opacity=80)}
		</style>
	</head>
	<body>
		<div class="exhibition">
			<div class="box bg_purple">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_red">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_green">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_brown">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_green">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_purple">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_brown">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
			<div class="box bg_red">
				<h3>大家好！</h3>
				<p>本人QQ：2632790902</p>
			</div>
		</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".box").hover(function(){
				$(this).find("p").fadeIn(200);
				$(this).find("h3").hide();
				$(this).addClass("animated fadeInUp bg_black");
			},function(){
				$(this).find("p").fadeOut(200);
				$(this).find("h3").show();
				$(this).removeClass("fadeInUp bg_black");
			});
		});
	</script>
	</body>
</html>
